<template>
  <a-modal
    v-model:visible="visible"
    title="新建转化追踪"
    :width="600"
    :destroyOnClose="true"
    @ok="handleAddConversion"
    :confirmLoading="loading"
  >
    <a-form :model="formState" :rules="rules" ref="formRef" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="账号" name="customerId">
        <a-select v-model:value="formState.customerId" placeholder="请选择账号" style="width: 100%">
          <a-select-option v-for="account in accountList" :key="account.id" :value="account.id">
            {{ account.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="目标" name="source">
        <a-radio-group v-model:value="formState.source">
          <a-radio-button :value="1">APP</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="转化名称" name="name">
        <a-input v-model:value="formState.name" placeholder="请输入转化名称，最多50字" :maxlength="50" show-count />
      </a-form-item>

      <a-form-item label="转化类型" name="type">
        <a-select v-model:value="formState.type" placeholder="请选择转化类型" style="width: 100%">
          <a-select-option :value="1">APP</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="APPID" name="appId">
        <a-input v-model:value="formState.appId" placeholder="请输入APPID" />
      </a-form-item>

      <a-form-item label="转化方案" name="trackingType">
        <a-radio-group v-model:value="formState.trackingType">
          <a-radio :value="2">API上报方案</a-radio>
          <a-radio :value="1">API统计方案</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { Form, message } from "ant-design-vue";

// 定义接口
interface Account {
  id: number;
  name: string;
}

interface ConversionForm {
  customerId: number | null;
  source: number;
  name: string;
  type: number;
  appId: string;
  trackingType: number;
}

interface Conversion {
  id: number;
  name: string;
  type: string;
}

// 定义 props
const props = defineProps({
  accountList: {
    type: Array as () => Account[],
    default: () => [],
  },
});

// 定义事件
const emit = defineEmits(["success"]);

// 表单相关
const formRef = ref();
const visible = ref(false);
const loading = ref(false);
const useForm = Form.useForm;

// 表单数据
const formState = reactive<ConversionForm>({
  customerId: null,
  source: 1,
  name: "",
  type: 1,
  appId: "",
  trackingType: 2,
});

// 表单验证规则
const rules = {
  customerId: [{ required: true, message: "请选择账号" }],
  source: [{ required: true, message: "请选择目标" }],
  name: [{ required: true, message: "请输入转化名称" }],
  type: [{ required: true, message: "请选择转化类型" }],
  appId: [{ required: true, message: "请输入APPID" }],
  trackingType: [{ required: true, message: "请选择转化方案" }],
};

// 显示弹窗
const show = () => {
  // 重置表单
  resetForm();

  // 显示弹窗
  visible.value = true;

  // 如果只有一个账号，自动选择
  if (props.accountList.length === 1) {
    formState.customerId = props.accountList[0].id;
  }
};

// 重置表单
const resetForm = () => {
  formState.customerId = null;
  formState.source = 1;
  formState.name = "";
  formState.type = 1;
  formState.appId = "";
  formState.trackingType = 2;

  if (formRef.value) {
    formRef.value.resetFields();
  }
};

// 处理新建转化追踪
const handleAddConversion = async () => {
  try {
    // 表单验证
    await formRef.value.validate();

    // 开始加载
    loading.value = true;

    // 模拟API请求
    setTimeout(() => {
      // 创建新的转化追踪对象
      const newConversion: Conversion = {
        id: formState.customerId! * 100 + Math.floor(Math.random() * 100), // 生成一个唯一ID
        name: formState.name,
        type: formState.type === 1 ? "APP" : "其他",
      };

      // 发送成功事件
      emit("success", newConversion);

      // 关闭弹框并显示成功消息
      visible.value = false;
      message.success("转化追踪创建成功");

      // 结束加载
      loading.value = false;
    }, 1000);
  } catch (error) {
    console.error("表单验证失败:", error);
    loading.value = false;
  }
};

// 暴露方法给父组件
defineExpose({
  show,
  resetForm,
});
</script>
